<template>
  <FormItemWrapper :widget="widget" :designer="designer">
    <JDictSelectTag
      v-if="ifShow"
      :placeholder="`${widgetProps.placeholder}${formItemLabelName}`"
      v-model:value="widgetProps.value"
      :dictType="widgetProps.dictType"
      :allowClear="widgetProps.allowClear"
      :type="widgetProps.dictCompType"
      :col-props="widgetProps.dictColProps"
      :valueToString="false"
      :style="widgetProps.style"
      :mode="multiple ? 'multiple' : null"
    />
    <JDictSelectTag
      v-else
      :placeholder="`${widgetProps.placeholder}${formItemLabelName}`"
      v-model:value="widgetProps.value"
      :dictType="widgetProps.dictType"
      :allowClear="widgetProps.allowClear"
      :valueToString="false"
      :col-props="widgetProps.dictColProps"
      :style="widgetProps.style"
      :type="widgetProps.dictCompType"
      :mode="multiple ? 'multiple' : null"
    />
  </FormItemWrapper>
</template>
<script lang="ts" name="dict-select-widget" setup>
  import { ref, computed, watch, provide } from "vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { Icon } from "/@/components/Icon"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import FormItemWrapper from "./FormItemWrapper.vue"
  import type { Designer } from "../../type"
  import { useWidget } from "../useWidget"
  import { JDictSelectTag } from "/@/components/Form"

  const props = defineProps({
    widget: { type: Object, default: {} },
    // componentProps: { type: Object, default: {}},
    designer: { type: Object as () => Designer },
    designerConfig: {
      type: Object,
      default: () => {
        return {
          formTemplates: true,
        }
      },
    },
  })

  const widgetProps = props.widget.props
  const attrs = useAttrs()
  // 强制刷新, 避免出现问题
  const ifShow = ref(false)
  const formItemLabelName = computed(() => {
    return widgetProps.formItemLabelName ? widgetProps.formItemLabelName : ""
  })

  watch(
    () => widgetProps.dictCompType,
    () => {
      ifShow.value = !ifShow.value
    },
    { deep: true, immediate: false }
  )

  const multiple = computed(() => {
    const multiple = widgetProps.dictCompType == "list"
    if (multiple) {
      widgetProps.value = undefined
    }
    return multiple
  })
  provide("designerConfig", props.designerConfig)
  const { watchDefaultValue } = useWidget()
  watchDefaultValue(props)
</script>

<style lang="less"></style>
